<template>
    <div>
        <el-form
            class="card-wrap padding20"
            :model="queryParams"
            ref="queryForm" @submit.native.prevent
            :label-width="labelWidth"
        >
            <el-row ref="search" :gutter="16">
                <slot></slot>

                <el-col :span="6" :offset="offset">
                    <div
                        class="flex"
                        style="justify-content: flex-end; margin-bottom: 20px"
                    >
                        <el-button @click="resetQuery">重置</el-button>

                        <el-button type="primary" @click.stop="handleQuery"
                            >查询</el-button
                        >

                        <div
                            v-if="showMoreBtn"
                            class="inline-flex align-center"
                            style="margin-left: 10px;cursor: pointer"
                            @click="toggle"
                        >
                            <span class="shrink">{{
                                showSearch ? "收起" : "展开"
                            }}</span>
                            <i
                                :class="
                                    !showSearch
                                        ? 'el-icon-arrow-down'
                                        : ' el-icon-arrow-up'
                                "
                                class="shrink"
                            ></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showSearch: false,
            showMoreBtn: false,
            offset: 0,
        };
    },
    props: {
        queryParams: {
            type: Object,
            default: () => {
                return {};
            },
        },
        labelWidth:{
          type:String,
          default:'120px'
        }
    },
    computed: {},
    mounted() {
        let children = this.$refs.search.$children;



        let allSpan = 0
        for (let childrenKey in children) {
            if(childrenKey != children.length-1){
                allSpan += children[childrenKey].span
            }
        }

        // this.showMoreBtn = children.length > 4;
        this.showMoreBtn = allSpan > 18;

        this.hide();
    },
    methods: {
        toggle() {
            this.showSearch = !this.showSearch;
            if (this.showSearch) {
                this.show();
            } else {
                this.hide();
            }
        },
        show() {
            let children = this.$refs.search.$children;

            let allSpan = 0
            for (let childrenKey in children) {
                children[childrenKey].$el.style.display = "inline-block";

                if(childrenKey != children.length-1){
                    allSpan += children[childrenKey].span
                }
            }
            let searchLen = allSpan/6
            if (searchLen % 4 == 0) {
                this.offset = 18;
            } else if (searchLen % 4 == 1) {
                this.offset = 12;
            } else if (searchLen % 4 == 2) {
                this.offset = 6;
            } else {
                this.offset = 0;
            }

            if(children[children.length-2].span>=16){
                this.offset = 18;
            }

            // let searchLen = children.length - 1;
            // if (searchLen % 4 == 0) {
            //     this.offset = 18;
            // } else if (searchLen % 4 == 1) {
            //     this.offset = 12;
            // } else if (searchLen % 4 == 2) {
            //     this.offset = 6;
            // } else {
            //     this.offset = 0;
            // }
        },
        hide() {
            let children = this.$refs.search.$children;

            let allSpan = 0
            for (let childrenKey in children) {
                if(childrenKey != children.length-1){
                    allSpan += children[childrenKey].span
                }
            }

            if (allSpan > 18) {
                for (let childrenKey in children) {
                    //TODO 这里需要计算前几个的宽度
                    if (childrenKey > 2 && childrenKey != children.length - 1) {
                        children[childrenKey].$el.style.display = "none";
                    }
                }
            }

            // if (children.length > 4) {
            //     for (let childrenKey in children) {
            //         if (childrenKey > 2 && childrenKey != children.length - 1) {
            //             children[childrenKey].$el.style.display = "none";
            //         }
            //     }
            // }

            let visibleList = children.filter((item) => {
                if (item.$el.style.display != "none") {
                    return item;
                }
            });

            let visibleallSpan = 0
            for (let childrenKey in visibleList) {
                if(childrenKey != visibleList.length-1){
                    visibleallSpan += visibleList[childrenKey].span
                }
            }

            let searchLen = visibleallSpan/6
            if (searchLen % 4 == 0) {
                this.offset = 18;
            } else if (searchLen % 4 == 1) {
                this.offset = 12;
            } else if (searchLen % 4 == 2) {
                this.offset = 6;
            } else {
                this.offset = 0;
            }

            // let searchLen = visibleList.length - 1;
            // if (searchLen % 4 == 0) {
            //     this.offset = 18;
            // } else if (searchLen % 4 == 1) {
            //     this.offset = 12;
            // } else if (searchLen % 4 == 2) {
            //     this.offset = 6;
            // } else {
            //     this.offset = 0;
            // }
        },
        handleQuery(val) {
            this.$emit("query", this.queryParams);
        },
        resetQuery() {
            this.$refs.queryForm.resetFields();
            this.resetForm("queryForm");
            this.$emit("reset");

        },
    },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.shrink {
    color: $primary;
    font-size: 13px;
}

::v-deep .el-form-item {
    margin-bottom: 20px;
}

::v-deep .el-input--medium .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
}

.el-button--medium {
    width: 68px;
    height: 32px;
    padding: 0;
}

::v-deep .el-date-editor--daterange {
    width: 100% !important;
}

::v-deep .col-box .el-date-editor--daterange {
    width: auto !important;
}

::v-deep .el-select {
    width: 100%;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
    height: 32px !important;
    line-height: 32px !important;
}
::v-deep .el-form-item--small .el-form-item__content {
    line-height: 32px;
    height: 32px;
}

::v-deep .el-range-editor.el-input__inner {
    padding: 3px 1px !important;
}

::v-deep .el-range-editor .el-icon-date {
    display: none !important;
}

::v-deep .el-range-editor--small .el-range-input {
    font-size: 11px !important;
}

</style>
